<template>
    <div class="">
        <el-card shadow="never">
            <div class="router-dom">
                <div class="router-item" v-for="item in customSonMenu"
                    :class="{ routerIndex: item.path == activeIndex }" @click="handMenuClick(item)" :key="item.path">
                    {{ item.title }}
                </div>
            </div>
        </el-card>
        <!-- tcl hht  -->
        <!-- 签约 -->
        <orderList v-if="showCom == 'orderList'"></orderList>
        <!-- 支付 -->
        <payment v-if="showCom == 'payment'"></payment>
        <!-- 渠道统计 -->
        <productStatistics v-if="showCom == 'productStatistics'"></productStatistics>
        <!-- 自动续费 -->
        <orderStatistics v-if="showCom == 'orderStatistics'"></orderStatistics>
    </div>
</template>

<script setup lang="ts">
import { ref, provide, watchEffect } from "vue"
import { useRoute } from "vue-router"
const route = useRoute()
import { storeToRefs } from 'pinia';
import { useCustomMenuStore } from "@/store/customMenu"
import { menuStore } from '@/store/menu'
// import autoRenewal from "./autoRenewal/index.vue"
import orderStatistics from './orderStatistics/index.vue'
import orderList from "./orderList/index.vue"
import payment from "./payment/index.vue"
import productStatistics from "./productStatistics/index.vue"

const { customSonMenu, activeIndex, showCom, getKey } = storeToRefs(useCustomMenuStore())
const Mstore = menuStore();
watchEffect(() => {
    const arr = activeIndex.value.split("/").slice(1)
    showCom.value = arr[2]
    const perMiss = customSonMenu.value.filter((item: any) => item.path == activeIndex.value)
    Mstore.filterPermission(activeIndex.value, perMiss);
    // YouKu Himalaya ChangLongHangKong NanGuaDianYing Keep
    console.log(arr[1],'getKey.value ');
    
    if (arr[1] == "tcl") {
        getKey.value = "TCL"
    } else if (arr[1] == "hht") {
        getKey.value = "HuoHuoTu"
    } else if (arr[1] == 'jxw') {
        getKey.value = "JiuXueWang"
    } else if (arr[1] == 'yk') {
        getKey.value = "YouKu"
    } else if (arr[1] == 'ng') {
        getKey.value = "NanGuaDianYing"
    } else if (arr[1] == 'keep') {
        getKey.value = "Keep"
    } else if (arr[1] == 'clhk') {
        getKey.value = "ChangLongHangKong"
    } else if (arr[1] == 'xmly') {
        getKey.value = "Himalaya"
    }
})

const handMenuClick = (item: any) => {
    activeIndex.value = item.path
    // 权限处理
}
</script>

<style scoped>
.router-dom {
    display: flex;
    height: 40px;
    align-items: center;

    .router-item {
        margin-right: 20px;
        cursor: pointer;
        font-family: Inter, Inter;
        font-weight: 400;
        font-size: 16px;
        color: #787878;
        font-style: normal;
        text-transform: none;
    }

    .routerIndex {
        font-family: Inter, Inter;
        font-weight: 400;
        font-size: 16px;
        color: #000000;
        font-style: normal;
        text-transform: none;
    }
}
</style>